<template>
  <div>
      <el-menu
        :default-active="getIttemIndex||1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        :default-openeds="routeList"
        router
        @select="selectFun"
        @close="handleClose">
        <el-menu-item  v-for="(item,index) in routeList" :key="index" :index="index+1" :route="item.path">
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.meta.title}}</span>
        </el-menu-item>

      </el-menu>
  </div>
</template>

<script>

export default {
name: "main-item",
  props:['list'],
  data(){
  return {
      routeList:[]
  }
  },
  computed:{
    menuActiveName: {
      get () { return this.$store.state.common.menuActiveName },
      set (val) { this.$store.commit('common/updateMenuActiveName', val) }
    },
    getIttemIndex(){
      return  sessionStorage.getItem('itemIndex')
    }
  },
  watch:{
    list:{
      handler(a,b){
        console.log(a)
       this.routeList=a;
      },
      deep:true
    }
  },
  methods: {
    selectFun(item){
      console.log(item)
      sessionStorage.setItem('itemIndex',item)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>

</style>
